<template>
  <div>
      <h3 class="head_h3">选择感兴趣的内容 <span>(多选)</span> </h3>
      <div class="wrapper">
          <ul>
              <li v-for="(cd,index) in choice_datas">
                  <span class="img_box" :class='{ action: cd.isAction }' @click="choice_cate(this,index)">
                      <img :src="cd.img" alt="">
                  </span>
                  <p class="wrp_p">{{cd.name}}</p>
              </li>
          </ul>
      </div>
      <router-link tag="a" :to="{ name: 'index', params: {} }" href="javascript:;" class="choice_btn" :style="choice_btn">打开为您定制的专属内容</router-link>
  </div>
</template>
<script>
import imgs1 from '@/assets/label_p01@2x.png'
import imgs2 from '@/assets/label_p02@2x.png'
import imgs3 from '@/assets/label_p03@2x.png'
import imgs4 from '@/assets/label_p04@2x.png'
import imgs5 from '@/assets/label_p05@2x.png'
import imgs6 from '@/assets/label_p06@2x.png'
import imgs7 from '@/assets/label_p07@2x.png'
import imgs8 from '@/assets/label_p08@2x.png'
import tabbar from '@/components/Tabbar'
export default {
    data(){
        return{
            choice_btn:{
                backgroundImage: "url(" + require("../assets/choice_btn@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            choice_datas:[
              {id:1,name:'美食小吃',img:imgs1,isAction:false},
              {id:2,name:'生活家居',img:imgs2,isAction:false},
              {id:3,name:'丽人养生',img:imgs3,isAction:false},
              {id:4,name:'服装配饰',img:imgs4,isAction:false},
              {id:5,name:'休闲娱乐',img:imgs5,isAction:false},
              {id:6,name:'住宿出行',img:imgs6,isAction:false},
              {id:7,name:'图书办公',img:imgs7,isAction:false},
              {id:8,name:'数码科技',img:imgs8,isAction:false}
            ]
        }
    },
    metaInfo: {
      title: "选择关注类型"
    },
    methods:{
        choice_cate:function(event,index){
          this.choice_datas[index].isAction=!this.choice_datas[index].isAction;
        }
    },
    components:{
        tabbar
    }
}
</script>
<style scoped>
.head_h3{
    margin:1.8rem 0 1.12rem 1.64rem;
    font-size: .96rem;
    color: #292929;
    font-weight: 500;
    text-align: left;
    line-height: 1.1;
}
.head_h3 > span{
    font-size: .4rem;
}
.wrapper{
    padding:0 0 0 1.64rem;
}
.wrapper ul{
    font-size: 0;
    text-align: left;
}
.wrapper ul li{
    display: inline-block;
    width: 3.76rem;
    margin: 0 .2rem .8rem 0;
}
.wrapper ul li .img_box{
    display: block;
    width: 3.76rem;
    height: 3.76rem;
    position: relative;
}
.wrapper ul li .img_box::after{
    content: "";
    display: block;
    width: .88rem;
    height: .88rem;
    border: .04rem solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    right: .2rem;
    top: .2rem;
}
.wrapper ul li .action::before{
    content: '\A0';
    display: inline-block;
    border: .12rem solid #fff;
    border-top-width: 0;
    border-right-width: 0;
    width: .66rem;
    height: .36rem;
    transform: rotate(-50deg);
    position: absolute;
    top: .3rem;
    right: .2rem;
}
.wrapper ul li .img_box img{
    width: 100%;
    height: auto;
}
.wrapper ul li .wrp_p{
    font-size: .56rem;
    color: #292929;
    font-weight: bold;
    line-height: 1.3;
    margin-top: .44rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    text-align: center;
}
.choice_btn{
    display: block;
    width: 13.32rem;
    height: 3.4rem;
    margin: 0 auto;
    font-size: .72rem;
    color: #FFFFFF;
    line-height: 3rem;
    letter-spacing: .08rem;
}
</style>
